<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仰卧起坐计数器</title>
</head>
<body>
    <h1>仰卧起坐计数器</h1>
    <div id="counter_display">计数: 0</div>
    <video id="video_feed" width="640" height="480" style="border: 2px solid black;" autoplay></video>
    <canvas id="canvas" width="640" height="480" style="border: 2px solid black;"></canvas>

    <script>
        var video = document.getElementById('video_feed');
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var counterDisplay = document.getElementById('counter_display');

        var counter = 0;
        var stage = null;

        function drawFrame() {
            context.drawImage(video, 0, 0, 640, 480);
            counterDisplay.innerText = "计数: " + counter;
            requestAnimationFrame(drawFrame);
        }

        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
                drawFrame();  // 开始绘制帧
            })
            .catch(function (err) {
                console.log("发生错误: " + err);
            });
    </script>
</body>
</html>
